<template>
  <el-collapse :value="isActive ? 'help' : ''" class="hui-mb-1">
    <el-collapse-item name="help">
      <template slot="title">
        {{ title }}
        <h-icon icon="icon-commenttextoutline" size="13px" class="hui-ml-8px"></h-icon>
      </template>
      <ol v-if="desc" class="hui-help">
        <li v-for="item in desc" :key="item" v-text="item"></li>
      </ol>
      <slot></slot>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
/**
 * hpro-help
 * @module components/hpro-help
 * @desc 运营贴士
 *
 * @param { string } title = 标题，默认值为“运营小助手”
 * @param { array } desc = 运营贴士内容，传数组进去，会生成li
 * @param { slot } slot = 传入内容模版
 */
export default {
  name: 'hpro-help',
  componentName: 'hpro-help',
  props: {
    title: {
      type: String,
      default: '运营小助手'
    },
    desc: Array,
    isActive: Boolean
  }
}
</script>

<style lang="less">
@import "../../common/h-theme/_variable.less";
.hui-help {
  color: @--color-text-regular;
}
</style>
